<template>
  <div>
    <div class="member_search_wrap">
      <el-autocomplete
        ref="searchValueRef"
        v-model="searchValue"
        :fetch-suggestions="queryMemberAsync"
        style="width: 100%"
        :trigger-on-focus="false"
        select-when-unmatched
        :placeholder="placeholder || $t('message.hy2')"
        @select="handleMemberSelect"
      >
        <el-button slot="append" @click="clear">{{
          $t("message.clear")
        }}</el-button>
      </el-autocomplete>
      <el-button
        v-if="isShowChooseBtn"
        class="ml20"
        type="primary"
        @click="openModal"
        >{{ $t("message.xzhy") }}</el-button
      >
      <el-button
        v-if="isShowXzhyBtn"
        class="ml20"
        type="primary"
        @click="memberAddBtn"
        >{{ $t("message.xzhy2") }}</el-button
      >
    </div>
    <el-dialog
      :title="$t('message.xzhy')"
      :visible.sync="isShowMemberList"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :append-to-body="true"
      width="1000px"
    >
      <div>
        <div class="df_ac mb20">
          <el-input
            v-model="modalSearchValue"
            class="w400"
            :placeholder="placeholder"
            @keyup.enter.native="queryList"
          >
            <!-- <el-button slot="append" icon="el-icon-search" @click="queryList()" /> -->
          </el-input>
          <el-button class="ml10" type="primary" @click="queryList()">{{
            $t("message.cx")
          }}</el-button>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-table doumee-element-tableb"
          @row-click="rowClick"
        >
          <el-table-column
            :label="$t('message.memberInfo')"
            min-width="200"
            align="center"
          >
            <template slot-scope="scope">
              <span class="name">{{ scope.row.nickName }}</span>
              <span v-if="scope.row.phone" class="phone">
                - {{ scope.row.phone }}</span
              >
              <span v-if="scope.row.number" class="number">
                - {{ scope.row.number }}</span
              >
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            :label="$t('message.hykh')"
            prop="number"
            min-width="80"
          /> -->
          <el-table-column
            align="center"
            :label="$t('message.hydj')"
            prop="cardName"
            show-overflow-tooltip
            min-width="100"
          />
          <!-- <el-table-column
            v-if="type === '20'"
            align="center"
            :label="$t('message.hydk')"
            show-overflow-tooltip
            min-width="80"
          >
            <template v-slot="scope">
              {{ scope.row.discount }}
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            :label="$t('message.czje')"
            show-overflow-tooltip
            prop="remainingMoney"
            min-width="80"
          />
          <el-table-column
            align="center"
            :label="$t('message.zsye')"
            show-overflow-tooltip
            prop="remainingGiveMoney"
            min-width="80"
          />
          <el-table-column
            :label="$t('message.createTime')"
            prop="createTime"
            min-width="160"
            align="center"
          />
        </el-table>
        <Pagination
          :total="totalCount"
          :page="pagination.page"
          @current-change="currentChange"
          @SizeChange="handleSizeChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowMemberList = false">{{
          $t("message.qx")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="isShowMemberList = false"
          >{{ $t("message.qr") }}</el-button
        >
      </span>
    </el-dialog>
    <MemberAdd
      v-if="isShowMemberAdd"
      ref="MemberAddRef"
      @successXzhy="successXzhy"
      @close="isShowMemberAdd = false"
      @submit="toVipAdd"
    />
  </div>
</template>

<script>
import { memberList, memberDetailInfo } from "@/api";
import dayjs from "dayjs";
import store from "@/store";
import { debounce } from "@/utils/debounce";
import MemberAdd from "@/views/vipList/memberAdd/index.vue";
import Pagination from "@/components/paginations";
export default {
  components: {
    Pagination,
    MemberAdd,
  },
  props: {
    placeholder: {
      type: String,
      default: () => "",
    },
    isShowChooseBtn: {
      type: Boolean,
      default: () => true,
    },
    isShowXzhyBtn: {
      type: Boolean,
      default: () => false,
    },
    type: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      searchValue: "",
      isShowMemberList: false,
      modalSearchValue: "",
      list: [],
      totalCount: 0,
      pagination: {
        rows: 10,
        page: 1,
        firstQueryTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      },
      listLoading: false,
      modalDialog: store.getters.dialog,
      isShowMemberAdd: false,
    };
  },
  methods: {
    // 新增会员
    memberAddBtn(value) {
      this.isShowMemberAdd = true;
      this.$nextTick(() => {
        this.$refs.MemberAddRef.isShowMember = true;
      });
    },
    toVipAdd(info) {
      this.$forceUpdate();
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.MemberSearchRef.openModal();
        }, 800);
      });
    },
    successXzhy(e) {
      console.log(e, "添加成功以后的数据 在这里");
      this.getList();
      setTimeout(() => {
        this.rowClick(e);
      }, 500);
      this.handleMemberSelect(e);
    },

    queryMemberAsync: debounce(function (queryString, cb) {
      if (!queryString) {
        this.$emit("clear");
      }
      const data = {
        pagination: {
          firstQueryTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
          page: 1,
          rows: 20,
        },
        param: {
          keyword: queryString,
        },
      };
      memberList(data).then((res) => {
        if (res.errorCode !== "000000") return;
        const result = res.recordList;
        result.forEach((item) => {
          item.value = item.nickName;
          if (item.phone) {
            item.value += "-" + item.phone;
          }
          if (item.number) {
            item.value += "（" + item.number + "）";
          }
        });
        cb(result);
      });
    }, 500),
    clearSearch() {
      this.searchValue = "";
      this.modalSearchValue = "";
    },
    handleMemberSelect(item) {
      memberDetailInfo({ param: { memberId: item.id } }).then((res) => {
        if (res.errorCode !== "000000") return;
        const obj = res.record || {};
        obj.searchValue = this.searchValue;
        this.$emit("select", obj);
      });
    },
    clear() {
      this.searchValue = "";
      setTimeout(() => {
        this.$refs.searchValueRef.focus();
      });
      this.$emit("clear");
    },
    rowClick(item) {
      memberDetailInfo({ param: { memberId: item.id } }).then((res) => {
        if (res.errorCode !== "000000") return;
        const obj = res.record || {};
        this.searchValue = obj.nickName;
        obj.searchValue = this.modalSearchValue;
        if (item.phone) {
          this.searchValue += "-" + item.phone;
        }
        if (item.number) {
          this.searchValue += "（" + item.number + "）";
        }
        this.$emit("select", obj);
      });
      this.isShowMemberList = false;
    },
    getList() {
      const { pagination, modalSearchValue } = this;
      this.listLoading = true;
      memberList({ pagination, param: { keyword: modalSearchValue } }).then(
        (res) => {
          this.listLoading = false;
          if (res.errorCode !== "000000") return;
          this.list = res.recordList;
          this.list.forEach((item) => {
            if (item.cardName && item.discountDoLIst) {
              item.discount = "";
              item.discountDoLIst.forEach((card) => {
                if (card.discountType === this.type) {
                  item.discount = card.discount;
                }
              });
            }
          });
          this.totalCount = res.totalCount;
        },
        () => {
          this.listLoading = false;
        }
      );
    },
    openModal() {
      this.modalSearchValue = "";
      this.queryList();
      this.isShowMemberList = true;
    },
    queryList() {
      this.pagination.page = 1;
      this.getList();
    },
    currentChange(val) {
      this.pagination.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagination.rows = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.member_search_wrap {
  display: flex;
  ::v-deep .el-input__validateIcon {
    display: none !important;
  }
}
</style>
